<template>
	<view class="search-coupon">

		<!-- 时间筛选 -->
		<view class="date-range">
			<uni-datetime-picker v-model="range" type="daterange" :clear-icon="false" :border="false"
				@change="maskClick" />
		</view>

		<!-- 筛选框 -->
		<view class="screen-box">
			<view class="screen-item" :class="{'active': screenIndex == index}" v-for="(item,index) in screenList"
				:key="index" @click="handleScreenToggle(index)">{{item.name}}</view>
		</view>


		<!-- 查询结果列表 -->
		<view class="result-list-box">
			<view class="result-item" v-for="(item, index) in couponList" :key="index">
				<view class="item-header-box">
					<view class="item-header-left-box">
						<image class="user-avatar" src="../../static/logo.jpg" mode="aspectFit"></image>
						<view class="user-info-box">
							<view class="user-name">Ed sheeran</view>
							<view class="user-car">车牌号：N090SC</view>
						</view>
					</view>
				</view>

				<view class="line"></view>

				<view class="coupon-content-box">
					<view class="coupon-info-item">
						<view class="info-label">卡劵类型</view>
						<view class="info-value coupon-type-value">抵扣劵</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">卡劵名称</view>
						<view class="info-value coupon-name-value">轮胎买3送1活动劵</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">适用范围</view>
						<view class="info-value">轮胎使用</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">有效时间</view>
						<view class="info-value">2022-11-31 至 2022-12-31</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">发放时间</view>
						<view class="info-value">2022-12-01 00:00:00</view>
					</view>
					<!-- <view class="coupon-info-item">
						<view class="info-label">核销时间</view>
						<view class="info-value">2022-12-16 00:00:00</view>
					</view> -->
				</view>

				<!-- 已核销状态 -->
				<!-- <image v-if="!isCharge" class="coupon-charge-img" src="../../static/coupon/coupon-charge.png"
					mode="widthFix"></image> -->
			</view>
		</view>

		<view class="height"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCharge: true,
				range: [],
				beginDate: "",
				endDate: "",
				couponList: [{}, {}],
				screenIndex: 0,
				screenList: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '抵扣券'
					},
					{
						id: 3,
						name: '换购券'
					},
					{
						id: 4,
						name: '满减券'
					}
				],
			}
		},
		methods: {
			maskClick(e) {
				this.beginDate = e[0] + " 00:00:00";
				this.endDate = e[1] + " 00:00:00";
				console.log('Click:', this.beginDate, this.endDate);
			},
			handleChargeCoupon() {
				uni.navigateTo({
					url: "/packageD/coupon/coupon-charge"
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.search-coupon {
		.screen-box {
			margin: 15px 20px 0 20px;
			display: flex;
			align-items: center;

			.screen-item {
				flex: 1;
				height: 31px;
				line-height: 31px;
				text-align: center;
				font-size: 13px;
				color: rgba(0, 0, 0, 0.8);
				background-color: rgba(0, 0, 0, 0.03);
				border-radius: 4px;
				margin-left: 10px;

				&:first-child {
					margin-left: 0;
				}

				&.active {
					background-color: rgba(255, 165, 61, 0.10);
					color: #FFA53D;
					font-weight: 500;
				}
			}
		}

		.search-box {
			margin: 20px;
			display: flex;
			align-items: center;
			border-radius: 4px;
			background-color: #fff;
			box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.05);
			padding: 10px 15px;
			box-sizing: border-box;

			.search-icon {
				font-size: 18px;
				color: rgba(0, 0, 0, 0.3);
				width: 18px;
				flex: 0 0 18px;
			}

			.search-input {
				flex: 1;
				min-width: 0;
				margin: 0px 10px;
				border: none;
				font-size: 12px;
				color: #666;
			}

			.placeholderClass {
				color: #ddd;
			}
		}

		.result-list-box {
			margin: 0 20px;

			.result-item {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				margin-top: 20px;
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
				padding: 20px;
				position: relative;

				.item-header-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-header-left-box {
						flex: 1;
						display: flex;
						align-items: center;

						.user-avatar {
							width: 48px;
							height: 48px;
							border-radius: 50%;
						}

						.user-info-box {
							margin-left: 10px;

							.user-name {
								font-size: 16px;
								color: rgba(0, 0, 0, 0.80);
								font-weight: 500;
							}

							.user-car {
								font-size: 12px;
								color: rgba(101, 101, 101, 1);
								margin-top: 3px;
							}
						}
					}

					.charge-btn {
						width: 70px;
						flex: 0 0 70px;
						text-align: center;
						padding: 3px 0;
						border: 1px solid rgba(255, 165, 61, 1);
						color: rgba(255, 165, 61, 1);
						font-size: 11px;
						border-radius: 40px;
						margin-left: 10px;
					}

				}

				.line {
					width: 100%;
					height: 1px;
					background-color: rgba(0, 0, 0, 0.06);
					margin-top: 15px;
				}

				.coupon-content-box {
					margin-top: 15px;

					.coupon-info-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10px;

						&:first-child {
							margin-top: 0;
						}

						.info-label {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.30);
						}

						.info-value {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.50);

							&.coupon-type-value {
								color: rgba(255, 165, 61, 1);
								font-weight: 600;
							}

							&.coupon-name-value {
								color: rgba(0, 0, 0, 0.70);
								font-weight: 600;
							}
						}
					}
				}

				.coupon-charge-img {
					position: absolute;
					right: 8px;
					top: 10px;
					width: 70px;
					height: 70px;
				}
			}
		}

		.height {
			height: 30px;
		}
	}
</style>
